<!--
 * @Author: your name
 * @Date: 2022-03-06 20:12:55
 * @LastEditTime: 2022-04-09 14:44:46
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \blog_web\src\views\news\news.vue
-->
<template>
  <div class="news">
    <template v-for="item in news">
      <el-card
        class="box-card"
        :key="item.id"
        @click.native="itemClick(item)"
        shadow="hover"
      >
        <div class="wrap">
          <!-- 图片 -->
          <div class="img">
            <!-- <img :src="item.picUrl" alt="" /> -->
            <el-image
              style="width: 100px; height: 100px"
              :src="item.picUrl"
              fit="cover"
            ></el-image>
          </div>

          <div>
            <!-- 新闻的标题 -->
            <p>{{ item.title }}</p>
            <!-- 新闻的事件 -->
            <div>{{ item.ctime }}</div>
            <!-- 新闻的地点 国内新闻 -->
            <div>{{ item.source }}</div>
          </div>
        </div>
      </el-card>
    </template>
    <!-- 加载更多 -->
    <!-- <div @click="loadMore">加载更多</div> -->
    <el-button type="success" @click="loadMore">加载更多</el-button>
  </div>
</template>

<script>
// 导入接口
import { getDomesticNews } from '@/api/third.js'
export default {
  name: 'Diary',
  data() {
    return {
      news: [],
      num: 10
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 卡片的点击事件
    itemClick(item) {
      window.open(item.url)
    },
    // 获取列表
    getList() {
      getDomesticNews({ num: this.num }).then((res) => {
        console.log('res', res)
        if (res.data.code == 200) {
          this.news = res.data.newslist
        }
      })
    },
    // 加载更多
    loadMore() {
      console.log('num', this.num)
      if (this.num == 50) {
        // alert("别翻了，没有了");
        this.$message.warning('没有更多了')
        return
      }
      this.num += 10
      this.getList()
    }
  }
}
</script>
<style lang="scss" scoped>
.news {
  .box-card {
    margin-bottom: 10px;
    cursor: pointer;
    .wrap {
      display: flex;
      justify-content: flex-start;
      .img {
        width: 100px;
        // height: 100%;
        vertical-align: bottom;
        margin-right: 15px;
        img {
          width: 100%;
          height: 100%;
          vertical-align: bottom;
        }
      }
    }
  }
}
</style>
